<template>
    <div>
      <el-container height="700px" > 
          <!-- //头部 -->
          <el-header height="70px">  
            <div style="text-align: center; font-size: 22px; margin-top: 50px;">工作台</div>
          </el-header>
  
          <!-- //身体 -->
        <el-main>
              <!-- 本日业绩,本月业绩 -->
              <el-container>
                <el-col >
                
                    <el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="我的任务" name="today" >
                  
                    <span>{{ '待分拣：'+this.toSortCount }}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span>{{ '已分拣：'+this.sortedCount }}</span>
                        <br>
                        <br>

                    <el-row>
                        <el-col  v-for=" m in toSortOrders" :key="m.id" style="" >
                            <el-card class="box-card"  body-style="padding:0px">
                                    <div style="padding: 14px;">
                                        <div style="font-size:13px">订单编号：{{ m.id }} 
                                            <span style="font-size:16px; margin-left:55px"><b>{{m.status== 0 ? "待分拣" : m.status == 1 ? "已分拣" : "查询出错!"}}</b></span>
                                            
                                        </div> 
                                        <br>
                                        <div>{{ m.address }}</div>
                                        <div>{{m.nickName+"&nbsp;&nbsp;&nbsp;&nbsp;"+m.phone }}</div>
                                        <br>
                                        <div style="font-size:15px"><b>{{ "商品："+m.goodsNums+"件" }}</b></div>
                                        <br>
                                        
                                        <div class="bottom clearfix"  >
                                            <el-row >
                                                <el-col :offset="5">
                                                    <div style="margin-top:8px">
                                                        &nbsp;    
                                                        <el-button round class="button"  v-if="m.status==0? true:false" size="medium" @click="updateOrderStatusAndSortingTime(m.id)"  >完成分拣</el-button>
                                                        <el-button type="info" round class="button" size="medium" @click="goodsDetails(m.id)">商品明细</el-button>
                                                    </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <br>
                    <br>
                    <br>
                    <br>
                    <br>

                    <el-row>
                        <el-col  v-for=" m in sortedOrders" :key="m.id" style="" >
                            <el-card class="box-card"  body-style="padding:0px">
                                    <div style="padding: 14px;">
                                        <div style="font-size:13px">订单编号：{{ m.id }} 
                                            <span style="font-size:16px; margin-left:55px"><b>{{m.status== 0 ? "待分拣" : m.status == 1 ? "已分拣" : "查询出错!"}}</b></span>
                                            
                                        </div> 
                                        <br>
                                        <div>{{ m.address }}</div>
                                        <div>{{m.nickName+"&nbsp;&nbsp;&nbsp;&nbsp;"+m.phone }}</div>
                                        <br>
                                        <div style="font-size:15px"><b>{{ "商品："+m.goodsNums+"件" }}</b></div>
                                        <br>
                                        
                                        <div class="bottom clearfix"  >
                                            <el-row >
                                                <el-col :offset="5">
                                                    <div style="margin-top:8px">
                                                        &nbsp;    
                                                        <el-button type="info" round class="button" size="medium" @click="goodsDetails(m.id)">商品明细</el-button>
                                                    </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    
                    
                    </el-tab-pane>


                  <el-tab-pane label="接单中心" name="month" >
                  
                    <span>{{ '待接单数量：'+this.toReceiveOrderCount }}</span>
                    <br>
                    <br>

                    <el-row>
                        <el-col  v-for=" m in orders" :key="m.id" style="" >
                    <el-card class="box-card" body-style="padding:0px">
                      <div style="padding: 14px;">
                                        <div style="font-size:13px">订单编号：{{ m.id }} 
                                            <span style="font-size:16px; margin-left:55px"><b>{{ '待接单' }}</b></span>
                                            
                                        </div> 
                                        <br>
                                        <div>{{ m.address }}</div>
                                        <div>{{m.nickName+"&nbsp;&nbsp;&nbsp;&nbsp;"+m.phone }}</div>
                                        <br>
                                        <div style="font-size:15px"><b>{{ "商品："+m.goodsNums+"件" }}</b></div>
                                        <br>
                                        
                                        <div class="bottom clearfix"  >
                                            <el-row >
                                                <el-col :offset="5">
                                                    <div style="margin-top:8px">    
                                                        <!-- <el-button round class="button" size="medium"   >完成分拣</el-button> -->
                                                        &nbsp;<el-button type="info" round class="button" size="medium" @click="insertSorterId(m.id)" >确认接单</el-button>
                                                    </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                     
                   </el-card>
                   </el-col>
                   </el-row>
                  </el-tab-pane>
                   </el-tabs>

                   <el-dialog
                    title=""
                    :visible.sync="dialogVisible"
                    width="90%"
                    round
                    >
                    <div style="margin-top:-30px;margin-left:30px;font-size :16px;">
                      <p  v-for="g in goodsDetailsInfo" :key="g.id">{{ g.name }} <span style="margin-left:100px">{{'数量：'+g.goodsNum }}</span></p>
                      <p style="margin-top:30px;"><b>{{ '合计'}}<span style="margin-left:108px">{{'数量：'+this.sum }}</span></b></p>
                    </div>

                     
                    </el-dialog>
                </el-col>
              </el-container>
    
  
              
              
          </el-main>
  
          <!-- //尾部 -->
          
      <el-footer>

            <!-- <div style="margin:-10px">
            
                <el-menu router mode="horizontal">
                <el-menu-item index="1" @click="$router.push('index')">首  页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('type')"> 分  类</el-menu-item>    
                <el-menu-item index="3" @click="$router.push('carts')"> 购 物 车</el-menu-item>
                <el-menu-item index="4" @click="$router.push('my')"> 我  的</el-menu-item>
                </el-menu> 
            
            
            </div> -->


            </el-footer>
      </el-container>
  
  
    </div>
  </template>
  
  <script>
import { ok } from 'assert';

    
  export default {
      data(){
          return{
              orderId:'', 
              sortingList:[],
              sum:0,
              dialogVisible:false,
              toSortOrders:[],
              sortedOrders:[],
              activeName: 'today',
              toSortCount:0, //待分拣
              sortedCount:0 ,//已分拣
              toReceiveOrderCount:0,//待接单
              myOrders:[
              {id:'345675611211',status:'待分拣',address:'XXXXXXX',name:'张女士',phone:'177****2111',count:'12'},],
              orders:[],
              goodsDetailsInfo:[]
              
          }
      },
      methods:{
        updateOrderStatusAndSortingTime(id){
          let orders={};
          orders.id=id;
          orders.status=1;//待配送
          this.$axios.post('api/app/updateOrderStatusAndSortingTime',orders)
          .then(res=>{
            console.log("获取当前时间")
            console.log(res.data);
            if(res.data.code==200){
              let tab={};
              tab.index=0;
              this.handleClick(tab);
     
              this.orderId = id;
              let userId=sessionStorage.getItem("sorterId");
              var state  = 1;
              this.$axios.get('/api/app/updateSorting?orderId='+this.orderId+"&userId="+userId+"&state="+state)
             .then(res =>{
              console.log('3de',state);
              console.log('ddd1',res.data);
              if(res.data.code == 200){
                return "ok";
            }
          })
            }
          })

        },
        goodsDetails(ordersId){
          this.goodsDetailsInfo=[];
          /*
          this.goodsDetailsInfo.forEach(function(item){
                  item.name='';
                  item.goodsNum=0;
                })
          */
          this.dialogVisible=true;
         
          this.$axios.get('api/app/findGoodsDetails?ordersId='+ordersId)
          .then(res=>{
            console.log(res.data);
            if(res.data.code=200){
                this.goodsDetailsInfo=res.data.data;
                let localSum=0;
                this.goodsDetailsInfo.forEach(function(item){
                  localSum=localSum+item.goodsNum;
                 console.log(localSum);
                })
                this.sum=localSum;
            }
            })
        


        },
        insertSorterId(id){
          let orders={};
          orders.sorterId=sessionStorage.getItem("sorterId");
          orders.id=id;
          this.$axios.post('api/app/updateSorterId',orders)
          .then(res=>{
            console.log(res.data);
            if(res.data.code==200){
              let tab={};
              tab.index=1;
              this.handleClick(tab);
              this.orderId = id;
               let sorterId=sessionStorage.getItem("sorterId");
              this.$axios.get('/api/app/findSorting?orderId='+this.orderId+"&sorterId="+sorterId)
             .then(res =>{
              if(res.data.code == 200){
                this.sortingList = res.data.data;
                console.log("dddd",this.sortingList);
                this.$axios.post('/api/app/insertSorting',this.sortingList)
                .then(res=>{
                  if(res.data.code == 200){
                    return "ok";
                  }
                })  
            }
          })
            }
          })


        },
        handleClick(tab, event) {
        console.log(tab, event);
        if(tab.index==0){
            let orders={};
            orders.sorterId=sessionStorage.getItem("sorterId");
            this.$axios.post('api/app/findOrdersByConditions',orders)
            .then(res=>{
              console.log(res.data.data);
              if(res.data.code==200){
                this.myOrders=res.data.data;
                let myOrdersArray=[];
                let myToSortOrders=[];
                let mySortedOrders=[];
                myOrdersArray=res.data.data;
                console.log(myOrdersArray);
                let toCount=0;
                let edCount=0;
               
                myOrdersArray.forEach(function(item){
                  if(item.status==0){
                    toCount++;
                    myToSortOrders.push(item);
                    
                  }else if(item.status==1){
                    edCount++;
                    mySortedOrders.push(item);
                   
                  }
                  })
                  this.toSortOrders=myToSortOrders;
                  this.sortedOrders=mySortedOrders;
                  console.log(myToSortOrders);
                  console.log(mySortedOrders);
                  this.toSortCount=toCount;
                  this.sortedCount=edCount;

              
              }

            })


            
        }else if(tab.index==1){
            let orders={};
            orders.status=0;
            orders.sorterId=null;
            this.$axios.post('api/app/findOrdersByConditions',orders)
            .then(res=>{
              console.log(res.data.data);
              if(res.data.code==200){
                this.orders=res.data.data;
                this.toReceiveOrderCount=res.data.data.length;

              }

            })

        }
      },

      },
      created(){
        let tab={};
        tab.index=0;
        this.handleClick(tab);
          
      }
  }
  </script>
  
  <style>
  .el-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    background-color:rgba(246, 246, 246, 1)
  }
    .el-row{
      background-color: white;
      border-radius: 10px;
      
    }
    .text {
    font-size: 14px;
  }

  .item {
    padding: 0px ;
    margin-top: 50px;
    margin-left: 100px;

  }

  .box-card {
  
    width: 500px;
    height: 200px;
  }




    .textBtn{
      padding-left: 10px;
    }
    .el-icon-map-location{
      font-size: 20px;
      height: 20px;
      margin: 6px;
    }
    .sel{
      position:absolute;
      clip:rect(2px 90px 30px 2px);
      width:100px;
      height:10px;
      line-height:20px;
      font-size:20px;
      font-weight:bold;
    }
    .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0px 0px 0px;
}
.el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
    background-color: #efefef;
}
.el-avatar>img {
    margin: 0px 0px 0px -5px;
}
  </style>